window.addEventListener('load',function () {
    var ul =document.querySelector('#list');
    var list = ul.children;
    var small_box = document.querySelector('#small_box');
    var box_img = small_box.firstElementChild;
    console.log(box_img);
    
    var mask = document.querySelector('#mask');
    var big = document.querySelector('#big_box');
    //  点击切换图片
    // for(var i = 0; i < list.length; i++){
    //     list[i].addEventListener('click',function () {
    //         var sum = i+1;
    //         small_box.style.background = '"url(images/pic000"+sum+".jpg)" no-repeat'
    //     })
    // }
    list[0].onclick =function () {
        box_img.src = 'images/pic001.jpg'
    };
    list[1].onclick =function () {
        box_img.src= 'images/pic002.jpg'
    };
    list[2].onclick =function () {
        box_img.src = 'images/pic003.jpg' 
    };
    
    
    
    small_box.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    small_box.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    
    small_box.addEventListener('mousemove', function (e) {

        var maskX = e.pageX - mask.offsetWidth - mask.offsetWidth/2;
        var maskY = e.pageY - mask.offsetHeight -mask.offsetHeight/2;

        var x = maskX - small_box.offsetLeft;
        var y = maskY - small_box.offsetTop;
        // 这遮罩的最大可移动区域
        var maskMax = small_box.offsetWidth - mask.offsetWidth;
        // 判断 设置的 位置 不能小于 0
        if (x <= 0) {
            x = 0;
        } else if (x >= maskMax) {
            x = maskMax;
        }
        // 判断设置最大区域
        if (y <= 0) {
            y = 0;
        } else if (y >= maskMax) {
            y = maskMax;
        }
        
        mask.style.top = y + 'px';
        mask.style.left = x + 'px';

       var bigImg = big.firstElementChild;
       var bigImgW = bigImg.offsetWidth - big.offsetWidth;
       var bigImgH = bigImg.offsetHeight - big.offsetHeight;
       
       bigImg.style.top = -y * bigImgH / maskMax + 'px';
       bigImg.style.left = -x * bigImgW / maskMax + 'px';
    })
    
})